<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title>{$list.webtitle}</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  {load href="__XADMIN__/css/font.css" /}
  {load href="__XADMIN__/css/xadmin.css" /}
  {load href="__XADMIN__/js/jquery.min.js" /}
  {load href="__XADMIN__/lib/layui/layui.js" /}
  {load href="__XADMIN__/js/xadmin.js" /}
  {load href="__XADMIN__/js/cookie.js" /}
  {load href="__XADMIN__/js/md5.min.js" /}
  {block name="jsset"}{/block}
  <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <!-- // 百度统计代码  -->
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?1fe9097e79cfcf0c8d4547c3a1ba50e0";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
  })();
</script>
</head>

<body>
  <div class="x-nav">
    {block name="nav"}{/block}
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
  </div>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-collapse" lay-filter="test">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">条件筛选<i class="layui-icon layui-colla-icon"></i></h2>
          <div class="layui-colla-content" lay-filter="srcmianban" id="srcmianban">
            <form class="layui-form layui-form-pane" id="search" lay-filter="search">
              {block name="search"}{/block}
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-row layui-col-space15" style="margin-top: 8px;">
      {block name="table"}{/block}
    </div>
  </div>
  {block name="echart"}{/block}
</body>
<!-- 状态按钮 -->
<script type="text/html" id="status">
  <input type="checkbox" myurl="{$list.status ? $list.status : url('status')}"
  {{d.status == 1 ? "checked" :""}} id="{{d.id}}"
  lay-skin="switch" lay-filter="status" lay-text="启用|禁用">
</script>
<script type="text/javascript">
//config的设置是全局的
layui.config({
  base: "__XADMIN__/js/" //假设这是你存放拓展模块的根目录
});
// 设置表格初始变量
options = {
  elem: '#tabledemo',
  toolbar: '#toolbarDemo',
  url: "{$list['dataurl']}",
  method: "POST", //数据接口
  page: true, //开启分页
  loading: true,
  autoSort: false,
  id: 'mytable',
  defaultToolbar: ['filter'],
  limits: [10, 25, 50, 75, 100],
  limit: 10,
};

</script>
{block name="myjs"}{/block}
<script type="text/javascript">
// 提交搜索条件后重载表格
layui.use(['table', 'form', 'mytable'], function() {
  var table = layui.table,
    form = layui.form,
    mytable = layui.mytable,
    elm = layui.element;

  //监听状态开关
  form.on('switch', function(data) {
    mytable.onoff(data);
  });

  // 监听筛选
  form.on('submit(searchSubmit)', function(data) {
    options.where = form.val("search");
    $('#srcmianban').removeClass("layui-show");
    table.render(options); //获取数据并渲染
    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
  });

  // 监听筛选
  form.on('submit(resetSubmit)', function(data) {
    form.render();
    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
  });

  //监听排序
  table.on('sort(mytable)', function(obj) {
    val = form.val("search");
    val.field = obj.field;
    val.order = obj.type;
    userTable.reload({
      initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
        ,
      where: val
    })
  });
});

</script>

</html>
